<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>写对联</title>
    <style>
            *{margin:0;padding:0;border:0;}
            body{font-family: "microsoft yahei";font-weight:bold;font-size:20px;}
			
			.startWrite{position: absolute;width:50%;border:1px solid #333;line-height:3em;border-radius:8px;left:25%;top:45%;text-align: center;}

            #canvas{position: absolute;bottom:0;left:0;z-index: 2}
            .optionBtn{position: absolute;z-index:2;width:100%;left:0;border-top:1px solid #666;background-color:#fff;}
            .optionBtn li{float:left;width:25%;list-style: none;text-align: center;}
            .bg{position: absolute;bottom:0;left:0;z-index: 0}
            .showLetter img{width:25%;float:left;}
            .couplet{position: fixed;z-index: 20;height:100%;background-color:#d00;background-image: url("bg2.png"),url("bg.png");background-repeat:no-repeat;background-size: 100%;background-position:top,bottom;}
            .coupletL{left:0;width:15%;top:10%;height:90%;}
            .coupletL img{width:100%;}
            .coupletR{right:0;width:15%;top:10%;height:90%;}
            .coupletR img{width:100%;}
            .coupletT{top:0;left:10%;width:80%;height:10%;background-image:url("bg4.png"),url("bg3.png");background-position:left,right;background-size: auto 100%;}
            .coupletT img{height:100%;float:left;}
            .scene2{display:none;}
            .scene3{display:none;}
            .coupletImg{position:absolute;width:50%;left:25%;top:25%;}
			
    </style>
    <script src="https://cdn.bootcss.com/EaselJS/0.8.0/easeljs.min.js"></script>
</head>
<body>	
		<div class="scene scene1">
			<div class="startWrite">开始写对联</div>
		</div>
		<div class="scene scene2">
			<ul class="optionBtn">
				<li>重写</li>
				<li>删除</li>
				<li>下联</li>
				<li>好了</li>
			</ul>
        	<canvas id="canvas" width="" height=""></canvas>
        	<div class="showLetter"></div>
        </div>
        <div class="scene scene3">
        	<img class="coupletImg" src="img.jpg" alt="">
			<div class="couplet coupletL"></div>
			<div class="couplet coupletR"></div>
			<div class="couplet coupletT"></div>
		</div>
		<script>
			var $ = function(name){
                return document.querySelector(name);
            }
			function showScene(num){
				document.querySelectorAll('.scene').forEach(function(elem,index){
					elem.style.display = 'none';	
					if(num == index+1)elem.style.display = 'block';
				});
			}
			$('.startWrite').onclick = function(e){
				showScene(2);
			};
		</script>
	      <script type="text/javascript">
               
               var stageW = window.innerWidth;
               $('#canvas').width = $('#canvas').height = window.stageW;
               $('#canvas').style.width = $('#canvas').style.height = stageW+'px';
               $('.optionBtn').style.bottom = stageW + 'px';

               var isStart = false;
               var stage = new createjs.Stage('canvas');
               createjs.Touch.enable(stage);
	       	   //绘制米字格
	       	   var bound = new createjs.Shape();
	       	   bound.graphics.setStrokeStyle(1,'round','round').beginStroke('#f00');	
               bound.graphics.f('#fff').r(0,0,stageW,stageW);
               bound.graphics.moveTo(0,stageW/2);
               bound.graphics.lineTo(stageW,stageW/2);
               bound.graphics.moveTo(stageW/2,0);
               bound.graphics.lineTo(stageW/2,stageW);
               bound.graphics.moveTo(0,0);
               bound.graphics.lineTo(stageW,stageW);
               bound.graphics.moveTo(stageW,0);
               bound.graphics.lineTo(0,stageW);
               bound.cache(0,0,stageW,stageW);
               stage.addChild(bound);
               //笔画对象
               var writer = new createjs.Shape();
               writer.cache(0,0,stageW,stageW);
               stage.addChild(writer);
               //帧循环
               createjs.Ticker.addEventListener('tick',function(){
                       stage.update();     
               });
		       
		       writer.graphics.setStrokeStyle(16,'round','round').beginStroke('#000');
		       var oldX = 0;
		       var oldY = 0;
		       imgTime = false;
		       //预览字
		       var imgFn = function(){
		   			var img = document.createElement('img');
		   			$('.showLetter').appendChild(img);
		   			writer.graphics.clear();
		   			writer.graphics.setStrokeStyle(16,'round').beginStroke('#000');
		   			imgTime = false;
		   			var dataUrl = writer.getCacheDataURL()
		   			img.src = dataUrl;//stage.toDataURL();	
		   			saveLetter(dataUrl);
		   			writer.uncache();
		   	   };
		   	   //绘制
	           stage.on('pressmove',function(e){
	           		if(imgTime){
	           			clearTimeout(imgTime);
	           		}
				   if(!isStart){
						writer.graphics.moveTo(e.stageX,e.stageY);
						isStart = true;	
						writer.uncache();
						
				   }     
		           writer.graphics.lineTo(e.stageX,e.stageY);
		           oldX = e.stageX;
					oldY = e.stageY;
		           
	           });
		       stage.on('pressup',function(){
			   		isStart = false;
			   		imgTime = setTimeout(imgFn,1300);	
			   		writer.cache(0,0,stageW,stageW);
		       });
		       //字的像素存储
		       var couplet = {
		       		l:[],
		       		r:[],
		       		t:[],
		       		now:'l'
		       };
		       function saveLetter(data){
		       			couplet.l[couplet.l.length] = data;
			       		
		       };

		       //选项按钮
		       document.querySelectorAll('.optionBtn li').forEach(function(elem,index){
		       		var _index = index;
		       		elem.onclick = function(e){
		       			switch(_index){
		       				//重写
		       				case 0:
		       					$('.showLetter').innerHTML = '';
		       					couplet.l = couplet.r = couplet.t = [];
		       					couplet.now = 'l';
		       				break;
		       				//删除
		       				case 1:
		       					couplet[couplet.now].length--;
		       					var img = document.querySelectorAll('.showLetter img');
		       					$('.showLetter').removeChild(img[img.length-1]);
		       				break;
		       				//下联
		       				case 2:
		       					if(couplet.now == 'l'){

		       						couplet.now = 'r';
		       						couplet.l = $('.showLetter').innerHTML;
		       					}else if(couplet.now == 'r'){

		       						couplet.now = 't';
		       						couplet.r = $('.showLetter').innerHTML;
		       					}else{

		       						break;
		       					}
		       					$('.showLetter').innerHTML = '';
		       				break;
		       				//好了
		       				case 3:	
		       					couplet.t = $('.showLetter').innerHTML;
		       					$('.coupletL').innerHTML = couplet.l;
		       					$('.coupletR').innerHTML = couplet.r;
		       					$('.coupletT').innerHTML = couplet.t;
		       					showScene(3);
		       				break;
		       			}
		       		};
		       });
	      </script> 
</body>
</html>